/* pages/pk-loading.wxss */
@import "../../assets/css/theme.scss";
@import "../../assets/css/common.scss";
page {
  height: 100%;
}
.loading-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 60rpx;
  width: 620rpx;
  height: 620rpx;
  .load-common {
    position: absolute;
    top: 278rpx;
    border-radius: 50%;
    display: flex;
    animation: load 2s linear infinite;
  }
  .out-load {
    width: 620rpx;
    height: 620rpx;
    align-items: center;
    justify-content: space-between;
    .loading {
      width: 148rpx;
      height: 477rpx;
    }
  }
  .in-load {
    top: 331rpx;
    width: 514rpx;
    height: 514rpx;
    align-items: center;
    flex-flow: column;
    justify-content: space-between;
    animation-direction: reverse;
    .loading {
      width: 395rpx;
      height: 122rpx;
    }
  }
  .bg-pk-loading {
    position: absolute;
    top: 400rpx;
    left: 50%;
    transform: translateX(-50%);
    width: 364rpx;
    height: 364rpx;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url("https://game.shuguos.com/upload/img/bg-pk-loading.png");
    .pk-photo {
      width: 144rpx;
      height: 144rpx;
      border-radius: 50%;
      background-color: white;
      border: solid 3rpx $deep-blue;
      overflow: hidden;
      .vs-me-image-img{
        width: 100%;
        height: 100%;
      }
    }
  }
  .pk-text {
    position: absolute;
    bottom: -400rpx;
    font-size: 28rpx;
    color: #0078f2;
    text-align: center;
  }
}
@keyframes load {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

// pk
.pk-content {
  position: relative;
  // animation-duration: 0.5ms;
  .pk-common {
    width: 549rpx;
    height: 989rpx;
  }
  .result-pk {
    position: relative;
    width: 160rpx;
    .result-photo {
      width: 120rpx;
      height: 120rpx;
      background: #ffffff;
      border: 4rpx solid $deep-blue;
      border-radius: 50%;
      margin: 0 auto;
      overflow: hidden;
      .vs-me-image-img{
        width: 100%;
        height: 100%;
      }
    }
    .result-name {
      margin: -10rpx auto 0;
      font-weight: bold;
      background-color: white;
      border-radius: 23rpx;
      color: $main-black;
      max-width: 160rpx;
      text-align: center;
    }
    .result-score {
      color: white;
      opacity: 0.5;
      font-size: 48rpx;
      margin-top: 10rpx;
      font-weight: bold;
    }
    .result-success-score {
      color: $main-red;
      opacity: 1;
    }
  }
  .pk-me {
    background-image: url("https://zsmatch.oss-cn-qingdao.aliyuncs.com/v3/20250318/loading_pk_me.png");
    .result-pk {
      left: 70rpx;
      top: 320rpx;
    }
  }
  .pk-you {
    position: absolute;
    bottom: 0;
    right: 0;
    background-image: url("https://game.shuguos.com/upload/img/bg-pk-you.png");
    .result-pk {
      left: 328rpx;
      top: 400rpx;
    }
  }
  .pk-text {
    margin: 392rpx auto 0;
    text-align: center;
    font-size: 28rpx;
    color: white;
  }
  .icon-vs-content {
    position: absolute;
    width: 100%;
    text-align: center;
    top: 500rpx;
    image {
      width: 327rpx;
      height: 406rpx;
    }
  }
}
